<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="detect" content="width=device-width,initial-scale">

  <title>My BCIT Project</title>
  <meta name="comp1800 template" content="My 1800 App">

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap Library CSS CDN go here -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
    crossorigin="anonymous">
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"
    crossorigin="anonymous"></script>

  <!-- Other libraries go here -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

  <!-- Link to styles of your own -->
  <!-- <link rel="stylesheet" href="./styles/style.css"> -->

  <link rel="stylesheet" href="styles/style.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="images/logo.png" alt="Logo" width="120" height="120">
        Navbar
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#">search</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">regional</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">wind direction</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">warn</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">data</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

  <div class="p-5 mb-4 bg-body-tertiary rounded-3">
    <div class="container-fluid py-5">
      <h1 class="display-5 fw-bold">Flood Information</h1>
      <p class="col-md-8 fs-4"></p>
      <button class="btn btn-primary btn-lg" type="button">go and see</button>
    </div>
    <img src="images/hs.jpg" alt="" height="600">
  </div>

  <div class="row">
    <div class="col-lg-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-geo-fill"
        viewBox="0 0 16 16">
        <path fill-rule="evenodd"
          d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.3 1.3 0 0 0-.37.265.3.3 0 0 0-.057.09V14l.002.008.016.033a.6.6 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.6.6 0 0 0 .146-.15l.015-.033L12 14v-.004a.3.3 0 0 0-.057-.09 1.3 1.3 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465s-2.462-.172-3.34-.465c-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411" />
      </svg>
      <h2 class="fw-normal">Location</h2>
      <p>Here you can locate the area in order to precisely search for flood information of the place you are going to
      </p>
      <p>
        <a class="btn btn-secondary" href="#" id="locationBtn">Precise search »</a>
      </p>
      <!-- Modal -->
      <div id="mapModal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <div id="map"><img src="images/map.jpg" alt="" height="400"></div> <!-- 这里放置地图 -->
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-alarm-fill"
        viewBox="0 0 16 16">
        <path
          d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5m2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.04 8.04 0 0 0 .86 5.387M11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.04 8.04 0 0 0-3.527-3.527" />
      </svg>
      <h2 class="fw-normal">Now</h2>
      <p>Here you can view real-time flood data</p>
      <p>
        <a class="btn btn-secondary" href="#">Precise search »</a>
      </p>
    </div>
    <div class="col-lg-4">
      <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-hourglass-split"
        viewBox="0 0 16 16">
        <path
          d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z" />
      </svg>
      <h2 class="fw-normal">History</h2>
      <p>Here you can filter time periods and view historical data</p>
      <p>
        <a class="btn btn-secondary" href="#">Precise search »</a>
      </p>
    </div>
  </div>


  <div class="container">
    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
      <div class="col-md-4 d-flex align-items-center">
        <img src="images/logo.png" alt="" height="50">
        <span class="mb-3 mb-md-0 text-body-secondary">© 2025 DG1-05</span>
      </div>
    </footer>
  </div>
  <script src="scripts/script.js"></script>
</body>